<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        form{
            width:270px;
        }
        input{
            width: 64%;
            background: #eee;
        }
        input:focus{
            background: #fff;
        }
        form{
            padding: 0 12px 12px;
        }
        label{
            display: block;
            padding-bottom:12px;
        }
        .label-text{
            width: 36%;
            float: left;
        }
        #img-show{
            width: 135px;
            height: 135px;
            display: block;
            margin: 0 auto;
            object-fit: cover;
        }
    </style>
    <script>
        function imgfileChange() {
            var img_show = document.getElementById("img-show");
            var imgfile = document.getElementById("imgfile");

            var freader = new FileReader();
            freader.readAsDataURL(imgfile.files[0]);
            freader.onload = function (e) {
                img_show.src = e.target.result;
            };
        }
    </script>
</head>
<body>
<div id="app">
    <div id="wrap">
        <div id="header">
            <div style="float: right;padding-top: 24px">2009/11/20</div>
            <h1>员工信息管理系统</h1>
        </div>
        <div id="header-bar"></div>
        <div id="content" style="height: 480px">
            <img src="../img/timg.jpg" style="float: right;height: 320px">
            <h2>修改员工</h2>
            <form action="viewspotlist.html" method="post">
                <label>
                    <div class="label-text">员&emsp;&emsp;工：</div>
                    <input type="text" v-model="worker.name">
                </label>
                <label>
                    <div class="label-text">图片：</div>
                    <div style="text-align: center;padding-left: 36%">
                        <img :src="src" alt="" id="img-show">
                        <input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()">
                    </div>
                </label>
                <label>
                    <div class="label-text">签到时间：</div>
                    <input type="text" v-model="worker.time">
                </label>
                <label>
                    <div class="label-text">业绩：</div>
                    <input type="text" v-model="worker.profit">
                </label>
                <label>
                    <div class="label-text">薪资：</div>
                    <input type="text" v-model="worker.salary">
                </label>
                <label>
                    <div class="label-text">员工描述：</div>
                    <input type="text" v-model="worker.workerdes">
                </label>
                <label>
                    <div class="label-text">所属部门：</div>
                    <select v-model="worker.departmentid">
                        <option  v-for="(pro,index) in departments" :value="pro.id" v-text="pro.name"></option>
                    </select>
                </label>
                <button type="button" @click="updateWorker">提 交</button>&emsp;
                <a :href="'viewspotlist.html?id='+ worker.departmentid">返回</a>
            </form>
        </div>
        <div id="footer">
            HB软件18 store小组
        </div>
    </div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>

    const app = new Vue({
        el: "#app",
        data: {
            id:"",
            worker:{},
            departments:[],
            src:"",
        },
        methods:{
            updateWorker(){
                console.log(this.worker);
                let myFile = this.$refs.myFile;
                let files = myFile.files;
                let file  = files[0];
                let formData = new FormData();
                formData.append("pic",file);
                formData.append("id",this.worker.id);
                formData.append("name",this.worker.name);
                formData.append("time",this.worker.time);
                formData.append("profit",this.worker.profit);
                formData.append("salary",this.worker.salary);
                formData.append("workerdes",this.worker.workerdes);
                formData.append("departmentid",this.worker.departmentid);
                //axios
                axios({
                    method:'post',
                    url:'http://localhost:9000/worker/update',
                    data:formData,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then((res)=>{
                    console.log(res.data);
                    if(res.data.state){
                        alert(res.data.msg+",点击确定回到员工列表");
                        location.href="./viewspotlist.html?id="+this.worker.departmentid;
                    }else{
                        alert(res.data.msg+",点击确定回到员工列表");
                    }
                });
            },
            findOneWorker(){//根据id查询员工信息
                _this =this;
                axios.get("http://localhost:9000/worker/findOne?id="+this.id).then((res)=>{
                    _this.worker = res.data;
                    _this.src = "data:image/png;base64,"+_this.worker.picpath;
                });
            },
            findAllDepartments(){
                _this = this;
                axios.get("http://localhost:9000/department/findByPage?rows=35").then((res)=>{
                    console.log(res.data.departments);
                    _this.departments = res.data.departments;
                });
            }
        },
        created(){
            let id = location.href.substring(location.href.indexOf("=")+1);
            this.id = id;
            this.findOneWorker();
            this.findAllDepartments();
        }
    })

</script>